<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>护士板块</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        #app {
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .el-aside {
            flex: 0 0 auto;
            width: 200px;
            background-color: #f0f0f0;
            display: flex;
            flex-direction: column;
        }

        .menu {
            flex: 1;
        }

        .el-header {
            background-color: #333;
            color: #fff;
            padding: 20px;
        }
        .system-title{
            font-size: 24px;
            font-weight: bold;
        }
        .custom-header {
            padding: 13px 10px;
        }
        .custom-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            width: 100%;
        }
        .table-header {
            display: flex;
            align-items: center;
        }

        .search-container {
            margin-left: auto;
            display: flex;
        }

        .search-input {
            margin-right: 10px;
        }
        .delete-button {
            margin-right: 10px;
        }

        .delete1-button {
            color: red;
        }

        .recharge-button {
            color: orange;
        }
        .custom-main {
            display: flex;
        }

        .main-container {
            display: flex;
            height: 100%;
            width: 100%;
        }

        .left-half {
            flex: 1;
            /* 左半部分的样式 */
        }

        .right-half {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
            /* 右半部分的样式 */
        }

        .card-container {
            flex: 1;
        }

        .card-content {
            height: 100%;
            padding: 20px;
            /* 卡片内容的样式 */
        }
        .slide-fade-enter-active,
        .slide-fade-leave-active {
            transition: opacity 0.5s ease;
        }

        .slide-fade-enter,
        .slide-fade-leave-to {
            opacity: 0;
        }
        .header-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .left-content {
            flex: 1;
        }

        .right-content {
            margin-left: auto;
        }
        .button-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .left-button {
            margin-right: 10px;
        }

        .right-button {
            margin-left: auto;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header class="custom-header">
            <div class="header-content">
                <span class="system-title">医院预约挂号系统</span>
            </div>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu
                        v-model="selectedIndex"
                        @select="handleMenuSelect"
                        default-active="1"
                        class="menu"
                        router
                        :collapse="isCollapse"
                        :collapse-transition="false"
                        :unique-opened="true"
                        :default-openeds="defaultOpeneds"
                >
                    <el-menu-item index="1">
                        <i class="el-icon-s-home"></i>
                        <span class="menu-item-text">首页</span>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <i class="el-icon-user"></i>
                        <span class="menu-item-text">用户信息</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-office-building"></i>
                        <span class="menu-item-text">医生信息</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-notebook-2"></i>
                        <span class="menu-item-text">药品信息</span>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <i class="el-icon-date"></i>
                        <span class="menu-item-text">预约管理</span>
                    </el-menu-item>
                    <el-menu-item index="6">
                        <i class="el-icon-s-data"></i>
                        <span class="menu-item-text">就诊记录</span>
                    </el-menu-item>
                    <el-menu-item index="7">
                        <i class="el-icon-receiving"></i>
                        <span class="menu-item-text">处方信息</span>
                    </el-menu-item>
                    <el-menu-item index="8">
                        <i class="el-icon-chat-dot-round"></i>
                        <span class="menu-item-text">留言反馈</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main class="custom-main">
                <div v-show="selectedIndex === '1'">

                </div>

                <div v-show="selectedIndex === '2'" style="width: 100%;">
                    <h2>用户信息</h2>
                    <div class="table-header">
                        <div class="search-container">
                            <div class="search-input">
                                <el-input v-model="searchUsername" placeholder="请输入账号"></el-input>
                            </div>
                            <div class="search-input">
                                <el-input v-model="searchNick" placeholder="请输入昵称"></el-input>
                            </div>
                            <el-button type="primary" @click="searchUsers">查询</el-button>
                        </div>
                    </div>

                    <!--渲染数据到前端页面的表格-->
                    <el-table
                            stripe
                            ref="multipleTable"
                            :data="tableUserData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            fit
                            @selection-change="handleSelectionChange"
                    >
                        <el-table-column fixed type="selection" width="55"></el-table-column>
                        <el-table-column prop="username" label="账号" align="center"></el-table-column>
                        <el-table-column prop="gender" label="性别" align="center">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.gender === 0 ? '' : 'success'">
                                    {{ scope.row.gender === 0 ? '男' : '女' }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="birthday" label="生日" align="center">
                            <template slot-scope="scope">{{ scope.row.birthday }}</template>
                        </el-table-column>
                        <el-table-column prop="nickname" label="昵称" align="center"></el-table-column>
                        <el-table-column prop="phone" label="电话" align="center"></el-table-column>
                        <el-table-column prop="email" label="邮箱"  align="center"></el-table-column>
                        <el-table-column prop="address" label="地址" align="center">
                        </el-table-column>
                        <el-table-column prop="job" label="职业" align="center">
                        </el-table-column>
                        <el-table-column prop="amount" label="金额" align="center">
                        </el-table-column>
                        <el-table-column prop="updateTime" width="100px" label="更新时间"  align="center">
                            <template slot-scope="scope">{{ scope.row.updateTime }}</template>
                        </el-table-column>
                        <el-table-column label="操作" width="300" align="center">
                            <template slot-scope="scope"><!--scope.row.id获取当前行的id属性数据-->
                                <el-button type="text" size="mini" class="recharge-button" @click="showRechargeModal(scope.row.id)">
                                    <i class="el-icon-money" style="font-size: 16px;"></i>
                                    <span style="font-size: 14px;">充值</span>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--分页组件-->
                    <div class="block" style=" float: right;margin-top: 20px">
                        <el-pagination
                                @size-change="handleSizeChangeUser"
                                @current-change="handleCurrentChangeUser"
                                :current-page="currentPageUser"
                                :page-sizes="[5, 10, 15, 20]"
                                :page-size="100"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totalUser">
                        </el-pagination>
                    </div>
                    <!--充值模态框开始-->
                    <el-dialog
                            title="充值"
                            :visible.sync="showRechargeDialog"
                            width="30%"
                            @close="closeRechargeModal">
                        <el-form label-width="80px">
                            <el-form-item label="充值金额:">
                                <el-input v-model="rechargeAmount" placeholder="请输入充值金额"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                                <el-button @click="closeRechargeModal">取消</el-button>
                                <el-button type="primary" @click="performRecharge">确认充值</el-button>
                            </span>
                    </el-dialog>
                    <!--充值模态框结束开始-->
                </div>

                <div v-show="selectedIndex === '3'" style="width: 100%;">
                    <h2>医生信息</h2>
                    <div class="table-header">
                        <div class="search-container">
                            <div class="search-input">
                                <el-input v-model="searchNo" placeholder="请输入工号"></el-input>
                            </div>
                            <div class="search-input">
                                <el-input v-model="searchName" placeholder="请输入姓名"></el-input>
                            </div>
                            <el-button type="primary" @click="searchDoctors">查询</el-button>
                        </div>
                    </div>

                    <!--渲染数据到前端页面的表格-->
                    <el-table
                            stripe
                            ref="multipleTable"
                            :data="tableDoctorData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            fit
                            @selection-change="handleSelectionChange"
                    >
                        <el-table-column prop="no" label="工号" align="center"></el-table-column>
                        <el-table-column prop="username" label="姓名" align="center"></el-table-column>
                        <el-table-column prop="gender" label="性别" align="center">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.gender === 0 ? '' : 'success'">
                                    {{ scope.row.gender === 0 ? '男' : '女' }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="deptname" label="科室" align="center"></el-table-column>
                        <el-table-column prop="birthday" label="生日" align="center">
                            <template slot-scope="scope">{{ scope.row.birthday }}</template>
                        </el-table-column>
                        <el-table-column prop="phone" label="电话" align="center"></el-table-column>
                        <el-table-column prop="email" label="邮箱"  align="center"></el-table-column>
                        <el-table-column prop="degree" label="学历" align="center">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.degree === 0 ? '' : 'success'">
                                    {{ scope.row.degree === 0 ? '本科' : '硕士' }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="joinTime" width="100px" label="入职时间"  align="center">
                            <template slot-scope="scope">{{ scope.row.joinTime }}</template>
                        </el-table-column>
                        <el-table-column prop="updateTime" width="100px" label="更新时间"  align="center">
                            <template slot-scope="scope">{{ scope.row.updateTime }}</template>
                        </el-table-column>
                    </el-table>
                    <div class="block" style=" float: right;margin-top: 20px">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[5, 10, 15, 20]"
                                :page-size="100"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                </div>

                <div v-show="selectedIndex === '4'" style="width: 100%">
                    <h2>药品信息</h2>
                    <el-divider></el-divider>
                    <div class="table-header">
                        <div class="search-container">
                            <div class="search-input">
                                <el-input v-model="drugNo" placeholder="请输入药品编号"></el-input>
                            </div>
                            <div class="search-input">
                                <el-input v-model="drugName" placeholder="请输入药品名称"></el-input>
                            </div>
                            <el-button type="primary" @click="searchDrug">查询</el-button>
                        </div>
                    </div>
                    <!--渲染数据到前端页面的表格-->
                    <el-table
                            stripe
                            :data="tableDrugData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            fit
                            @selection-change="handleSelectionChange"
                    >
                        <el-table-column prop="drugNo" label="编号" align="center"></el-table-column>
                        <el-table-column prop="drugName" label="名称" align="center"></el-table-column>
                        <el-table-column prop="inventory" label="库存" align="center"></el-table-column>
                        <el-table-column prop="unitprice" label="单价" align="center"></el-table-column>
                        <el-table-column prop="unit" label="单位" align="center"></el-table-column>
                        <el-table-column prop="usage" label="用法" align="center">
                            <template slot-scope="scope">
                                <template v-if="scope.row.usage === 1">
                                    <el-tag type="success">口服</el-tag>
                                </template>
                                <template v-else-if="scope.row.usage === 2">
                                    <el-tag type="info">外敷</el-tag>
                                </template>
                                <template v-else-if="scope.row.usage === 3">
                                    <el-tag type="warning">注射</el-tag>
                                </template>
                                <template v-else>
                                    <el-tag type="danger">-</el-tag>
                                </template>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remark" label="备注" align="center"></el-table-column>
                    </el-table>
                    <div class="block" style=" float: right;margin-top: 20px">
                        <el-pagination
                                @size-change="handleSizeChangeDrug"
                                @current-change="handleCurrentChangeDrug"
                                :current-page="currentPageDrug"
                                :page-sizes="[5, 10, 15, 20]"
                                :page-size="100"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totalDrug">
                        </el-pagination>
                    </div>
                </div>

                <div v-show="selectedIndex === '6'" style="width: 100%">
                    <el-empty description="阿锋正在开发中..."></el-empty>
                </div>

                <div v-show="selectedIndex === '7'" style="width: 100%">
                    <el-empty description="阿锋正在开发中..."></el-empty>
                </div>

                <div v-show="selectedIndex === '8'" style="width: 100%">
                    <el-empty description="阿锋正在开发中..."></el-empty>
                </div>

                <div v-show="selectedIndex === '9'" style="width: 100%">
                    <el-empty description="阿锋正在开发中..."></el-empty>
                </div>

                <div v-show="selectedIndex === '10'" style="width: 100%;">
                    <h2>公告信息</h2>
                    <div class="table-header">
                        <el-button type="danger" @click="deleteNoticeSelection" class="delete-button">删除</el-button>
                        <el-button type="primary" @click="showAddNotice">新增</el-button>

                        <!--增加模态框开始-->
                        <el-dialog
                                title="新增公告"
                                :visible.sync="dialogNoticeVisible"
                                width="30%"
                                @close="resetNewNotice"
                        >
                            <el-form :model="newNotice" :rules="noticeRules" ref="newNoticeForm" label-width="80px" label-width="80px">
                                <el-form-item label="主题">
                                    <el-input v-model="newNotice.notice"></el-input>
                                </el-form-item>
                                <el-form-item label="发布时间">
                                    <el-date-picker
                                            v-model="newNotice.issueTime"
                                            type="date"
                                            placeholder="选择日期"
                                    ></el-date-picker>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="addNotice">提交</el-button>
                                    <el-button @click="resetNoticeForm">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </el-dialog>
                        <!--增加模态框结束-->
                        <!--公告编辑模态框开始-->
                        <el-dialog
                                title="编辑公告"
                                :visible.sync="editModalNoticeVisible"
                                width="30%"
                                @close="resetNoticeForm">
                            <el-form :model="editedNotice" ref="editNoticeForm" label-width="80px">
                                <el-form-item label="主题">
                                    <el-input v-model="editedNotice.notice"></el-input>
                                </el-form-item>
                            </el-form>
                            <span slot="footer" class="dialog-footer">
                                 <el-button @click="editModalNoticeVisible = false">取消</el-button>
                                 <el-button type="primary" @click="submitNoticeEdit">提交</el-button>
                            </span>
                        </el-dialog>
                        <!--编辑模态框结束-->
                        <div class="search-container">
                            <div class="search-input">
                                <el-input v-model="themeNotice" placeholder="请输入公告主题"></el-input>
                            </div>
                            <el-button type="primary" @click="searchNotice">查询</el-button>
                        </div>
                    </div>

                    <!--渲染数据到前端页面的表格-->
                    <el-table
                            stripe
                            :data="tableNoticeData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            fit
                            @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="notice" label="公告主题" align="center"></el-table-column>
                        <el-table-column prop="issueTime" label="发布时间" align="center"></el-table-column>
                        <el-table-column label="操作" width="200">
                            <template slot-scope="scope"><!--scope.row.address获取当前行的address属性数据-->
                                <el-button type="danger" size="mini" @click="deleteNoticeById(scope.row.id)">删除</el-button>
                                <el-button type="primary" size="mini" @click="editNotice(scope.row.id)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block" style=" float: right;margin-top: 20px">
                        <el-pagination
                                @size-change="handleSizeChangeNotice"
                                @current-change="handleCurrentChangeNotice"
                                :current-page="currentPageNotice"
                                :page-sizes="[5, 10, 15, 20]"
                                :page-size="100"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totalNotice">
                        </el-pagination>
                    </div>
                </div>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script src="js/echarts.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/index.min.js"></script>
<script src="js/axios.js"></script>
<script src="js/dayjs.min.js"></script>
<script src="js/nurse.js"></script>
</html>